<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="点位名称" prop="positionId">
        <zzToolip ref="toolipRef" :content="content">
          <el-cascader
            ref="cascaderRef"
            placeholder="请输入"
            :options="positionOptions"
            clearable
            filterable
            :props="{ value: 'id', label: 'name', children: 'children' }"
            v-model="queryParams.positionId"
            @change="handleChange"
          />
        </zzToolip>
      </el-form-item>
      <el-form-item label="社群名称" prop="groupChatName">
        <el-input
          v-model="queryParams.groupChatName"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客服人员(账号)" prop="operationUserName">
        <el-input
          maxlength="11"
          v-model="queryParams.operationUserName"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="城市标签" prop="cityName">
        <el-select
          v-model="queryParams.cityName"
          @change="handleQuery"
          clearable
          fit-input-width
          placeholder="请选择"
        >
          <el-option
            v-for="item in cityNameOptions"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['association:list:query']" @click="resetQuery">重置</el-button>
        <el-button v-hasPermi="['association:list:query']" type="primary" @click="handleQuery"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          v-hasPermi="['association:list:add']"
          icon="Plus"
          @click="handleAdd"
        >
          新建
        </el-button>
      </el-col>

      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" index :data="dataList">
      <el-table-column type="index" :index="indexAdd" label="编号" width="50" align="center" />
      <el-table-column label="城市标签" show-overflow-tooltip align="center" prop="cityName" />
      <el-table-column label="点位名称" min-width="150px" align="center" prop="positionName">
        <template #default="{ row }">
          <el-tooltip
            :content="`${row.companyName}-${row.areaName}-${row.routeName}-${row.positionName}`"
            placement="top"
          >
            <div style="text-align: center"> {{ row.positionName }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="社群名称" min-width="150px" align="center" prop="groupChatName" />
      <el-table-column label="成员数量" align="center" prop="member" />
      <el-table-column
        label="客服人员(账号)"
        min-width="150px"
        align="center"
        prop="operationUserName"
      />

      <el-table-column label="详情" align="center" width="60" fixed="right">
        <template #default="{ row }">
          <el-button
            v-hasPermi="['association:list:detail']"
            link
            type="primary"
            @click="handleDetail(row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="二维码查看" align="center" width="100" fixed="right">
        <template #default="{ row }">
          <el-button
            v-hasPermi="['association:list:qr']"
            v-if="row.member < 200 && row.status === 1"
            link
            type="primary"
            @click="editQr(row)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <add-association ref="addRef" @refresh="handleQuery" />
    <qrDialog ref="qrRef" />
    <association-detail ref="detailRef" />
  </div>
</template>

<script setup name="AssociationList">
import { getAssociationList, getAllPositions } from '@/api/association'
import addAssociation from './components/addAssociation.vue'
import qrDialog from './components/qrDialog.vue'
import associationDetail from './components/associationDetail.vue'
import zzToolip from './components/zzToolip.vue'
import useGlobalStore from '@/store/modules/global'

const globalStore = useGlobalStore()
const cityNameOptions = computed(() => {
  return globalStore.myCityList
})

const queryRef = ref(null)
const positionOptions = ref([])

const addRef = ref(null)
const qrRef = ref(null)
const detailRef = ref(null)
const cascaderRef = ref(null)
const content = ref('')

const dataList = ref([])

const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)

const queryParams = reactive({
  positionId: [],
  operationUserName: '',
  asscoiationId: '',
  groupChatName: '',
  cityName: '',
  pageNum: 1,
  pageSize: 10
})

// 表格编号递增
function indexAdd(index) {
  const { pageNum, pageSize } = queryParams
  return index + 1 + (pageNum - 1) * pageSize
}

onMounted(() => {
  getAllPositions().then((res) => {
    const data = res?.data || []
    positionOptions.value = data.map((item) => {
      if (item.children && item.children.length > 0) {
        item.children = item.children.map((item1) => {
          if (item1.children && item1.children.length > 0) {
            item1.children = item1.children.map((item2) => {
              if (!item2.children || item2.children.length === 0) {
                item2.disabled = true
              }
              return item2
            })
          } else {
            item1.disabled = true
          }
          return item1
        })
      } else {
        item.disabled = true
      }
      return item
    })
  })
})

/** 查询用户列表 */
function getList() {
  loading.value = true
  const params = {
    ...queryParams,
    positionId:
      queryParams.positionId && queryParams.positionId.length
        ? queryParams.positionId[queryParams.positionId.length - 1]
        : ''
  }
  getAssociationList(params)
    .then((res) => {
      loading.value = false
      dataList.value = res?.data?.rows || []
      total.value = res?.data?.total || 0
    })
    .catch(() => {
      loading.value = false
    })
}

// 搜索
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

function handleChange() {
  const node = cascaderRef.value.getCheckedNodes()
  const nodeData = node && node.length ? node[0] : {}
  content.value = nodeData.text || ''
}

// 重置
function resetQuery() {
  queryRef.value.resetFields()
  handleQuery()
}

// 新增
function handleAdd() {
  addRef.value.init(queryParams.cityName)
}

//详情
function handleDetail(row) {
  console.log(row.groupChatId)
  detailRef.value.init(row.groupChatId)
}

// 编辑二维码
function editQr(row) {
  qrRef.value.init(row.asscoiationCode)
}

getList()
</script>

<style lang="scss" scoped>
.el-input {
  width: 215px;
}
</style>
